<template>
  <div class="box">
    <div class="dv"></div>
    <div class="banner">
      <van-swipe :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="(v, index) in arr2" :key="index">
          <img :src="v.img" style="width: 44.4667vw; height: 35.7333vw" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="goods">
      <div style="position: absolute; top: 158vw; right: 30vw">
        <img
          src="https://m.360buyimg.com/babel/jfs/t1/170557/16/29885/32209/63e0ffb9Ffadf4beb/38c20fdc55e20c5b.png"
          alt=""
          style="width: 14.9333vw; height: 14.9333vw"
        />
        <br />
        <span>￥9.90</span>
      </div>
      <div style="position: absolute; top: 158vw; right: 7vw">
        <img
          src="https://m.360buyimg.com/babel/jfs/t1/170584/7/34195/27741/63e0cd1bF348f4245/8f2dbdfaeab92f59.png"
          alt=""
          style="width: 14.9333vw; height: 14.9333vw"
        />
        <br />
        <span>￥7.90</span>
      </div>
      <div style="position: absolute; top: 195vw; left: 7vw">
        <img
          src="https://m.360buyimg.com/babel/jfs/t1/161699/11/34344/13689/63c4dd11Fc80835c9/ba43ddee33949c1c.png"
          alt=""
          style="width: 12.2667vw; height: 12.2667vw"
        />
        <br />
        <span style="font-size: 12px">￥259</span><br />
        <span style="font-size: 12px; color: #fb6a86; text-align: center"
          >补贴价</span
        >
      </div>
      <div style="position: absolute; top: 195vw; left: 20vw">
        <img
          src="https://m.360buyimg.com/babel/jfs/t1/168681/21/34148/14312/63c4d945Fb1c0e2ff/73f4ee295e2c443a.png"
          alt=""
          style="width: 12.2667vw; height: 12.2667vw"
        />
        <br />
        <span style="font-size: 12px">￥1399</span><br />
        <span style="font-size: 12px; color: #fb6a86; text-align: center"
          >补贴价</span
        >
      </div>
      <div style="position: absolute; top: 195vw; left: 33vw">
        <img
          src="https://m.360buyimg.com/babel/jfs/t1/146293/10/32341/8473/63c4db73F8deeef38/8288f5676d8debb2.png"
          alt=""
          style="width: 12.2667vw; height: 12.2667vw"
        />
        <br />
        <span style="font-size: 12px">￥1412</span><br />
        <span style="font-size: 12px; color: #fb6a86; text-align: center"
          >补贴价</span
        >
      </div>
      <div style="position: absolute; top: 195vw; right: 30vw">
        <img
          src="https://m.360buyimg.com/babel/jfs/t1/34588/1/20301/13125/63e0e00bF6aedf69a/d37179db70a33f90.png"
          alt=""
          style="width: 18.1333vw; height: 20.5333vw"
        />
      </div>
      <div style="position: absolute; top: 195vw; right: 7vw">
        <img
          src="https://m.360buyimg.com/babel/jfs/t1/30813/7/20023/6213/63e0d050Fba85f77f/69937b7b7da590a1.png"
          alt=""
          style="width: 14.9333vw; height: 14.9333vw"
        />
        <br />
        <span>￥599</span>
      </div>
    </div>
    <div class="foot">
      <img
        src="https://m.360buyimg.com/babel/jfs/t1/117277/37/34349/50827/63e491eaF264a7ba5/453e8524dfe4fb44.png"
        alt=""
        style="
          width: 72.2667vw;
          height: 33.8667vw;
          margin: 7.3333vw 0 0 2.3333vw;
        "
      />
      <div style="margin-top: 2.6667vw">
        <img
          src="https://m.360buyimg.com/babel/jfs/t1/99453/37/36431/5300/63c5397fF243bf127/848d4d835f43a919.png"
          alt=""
          style="width: 18.6667vw; height: 18.6667vw"
        />
        <img
          src="https://m.360buyimg.com/babel/jfs/t1/59342/37/23927/6720/63c4fedeFc8b89aed/f12be19a60185ac3.png"
          alt=""
          style="width: 18.6667vw; height: 18.6667vw"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr2: [
        {
          img: "https://m.360buyimg.com/babel/jfs/t1/120212/36/31147/31750/63e21960F43fdeca2/0038b6eaaa2287cd.png",
        },
        {
          img: "https://m.360buyimg.com/babel/jfs/t1/197084/7/30136/74720/63e1faafF2f9c1607/00c0b77c01cbb520.png",
        },
        {
          img: "https://m.360buyimg.com/babel/jfs/t1/130827/15/30631/65288/63e1fa8eF1f2fa3d8/47822edf65856756.png",
        },
      ],
    };
  },
};
</script>

<style scoped>
.dv {
  margin-top: 2.6667vw;
  width: 97.2vw;
  height: 71.2vw;
  margin: auto;
  background: url(https://m.360buyimg.com/babel/jfs/t1/66668/29/20015/164066/63e3533cF1682149a/ef7bd5c0d2d306f3.png);
  background-size: 97.2vw 71.2vw;
  position: relative;
}
.banner {
  width: 47.4667vw;
  height: 35.7333vw;
  position: absolute;
  top: 153vw;
  left: 5vw;
}
.goods {
  display: flex;
  line-height: 10px;
}
.foot {
  margin-top: 2.6667vw;
  width: 97.3333vw;
  height: 47.2vw;
  margin: auto;
  background: url(https://m.360buyimg.com/babel/jfs/t1/63668/40/24416/96256/63e35342F80598774/8621177b0b40a2b1.png);
  background-size: 97.3333vw 47.2vw;
  display: flex;
}
</style>
